{% extends "layouts/layout.njk" %}

{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}

{% block content %}
  <h1 class="govuk-heading-xl">
    GOV.UK Frontend
  </h1>

  <div class="govuk-grid-row">

    <div class="govuk-grid-column-one-third-from-desktop">
      <h2 class="govuk-heading-l">Components</h2>
      <h3 class="govuk-heading-m govuk-!-margin-bottom-2">All components</h3>
      <p class="govuk-body"><a href="/components" class="govuk-link govuk-link--muted">View all components</a></p>

      <div class="govuk-grid-row govuk-!-margin-bottom-8">

        {% for componentNamesSlice in componentNames | slice(2) %}
        <div class="govuk-grid-column-one-half govuk-grid-column-full-from-desktop">
          <ul class="govuk-list govuk-!-margin-bottom-0">
          {% for componentName in componentNamesSlice %}
            <li><a href="/components/{{ componentName }}" class="govuk-link">{{ componentName | unslugify }}</a></li>
          {% endfor %}
          </ul>
        </div>
        {% endfor %}

      </div>

    </div>

    <div class="govuk-grid-column-two-thirds-from-desktop">
      <h2 class="govuk-heading-l">Examples</h2>

      <div class="govuk-grid-row">

        <div class="govuk-grid-column-one-half">
          <h2 class="govuk-heading-m govuk-!-margin-bottom-2">Full page examples</h2>
          <p class="govuk-body"><a href="/full-page-examples" class="govuk-link govuk-link--muted">View all full page examples</a></p>

          <h3 class="govuk-heading-s govuk-!-margin-bottom-2">With single page</h3>
          <ul class="govuk-list govuk-!-margin-bottom-4">
          {% for example in fullPageExamples | rejectattr("hasPageConfirm") %}
            <li><a href="/full-page-examples/{{ example.path }}" class="govuk-link">{{ example.name | unslugify }}</a></li>
          {% endfor %}
          </ul>

          <h3 class="govuk-heading-s govuk-!-margin-bottom-2">With multiple pages</h3>
          <ul class="govuk-list govuk-!-margin-bottom-8">
          {% for example in fullPageExamples | selectattr("hasPageConfirm") %}
            <li><a href="/full-page-examples/{{ example.path }}" class="govuk-link">{{ example.name | unslugify }}</a></li>
          {% endfor %}
          </ul>
        </div>

        <div class="govuk-grid-column-one-half">
          <h3 class="govuk-heading-m govuk-!-margin-bottom-2">Other examples</h3>

          <ul class="govuk-list govuk-!-margin-bottom-8">
          {% for exampleName in exampleNames | sort %}
            <li><a href="/examples/{{ exampleName }}" class="govuk-link">{{ exampleName | unslugify }}</a></li>
          {% endfor %}
          </ul>
        </div>

      </div>
    </div>

  </div>

  {% if flags.hasDocsStyles or flags.hasDocsScripts %}
  <div class="govuk-grid-row">

    <div class="govuk-grid-column-two-thirds-from-desktop">
      <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
      <h2 class="govuk-heading-l">Documentation</h2>

      <div class="govuk-grid-row">

        {% if flags.hasDocsStyles %}
        <div class="govuk-grid-column-one-half">
          <h3 class="govuk-heading-m govuk-!-margin-bottom-2">Sass API reference</h3>
          <ul class="govuk-list">
          {% if not flags.isDeployedToHeroku %}
            <li><a href="/docs/sass" class="govuk-link">Local version</a></li>
          {% endif %}
            <li><a href="https://frontend.design-system.service.gov.uk/sass-api-reference/" class="govuk-link">Latest release</a></li>
          </ul>
        </div>
        {% endif %}

        {% if flags.hasDocsScripts %}
        <div class="govuk-grid-column-one-half">
          <h3 class="govuk-heading-m govuk-!-margin-bottom-2">JavaScript API reference</h3>
          <ul class="govuk-list">
            <li><a href="/docs/javascript" class="govuk-link">Local version</a></li>
          </ul>
        </div>
        {% endif %}

      </div>
    </div>
  </div>
  {% endif %}

  {% if flags.hasStats %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">
      <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
      <h2 class="govuk-heading-l govuk-!-margin-bottom-2">JavaScript modules</h2>

      {% set bundleKey = "all" %}
      {% set bundleSize = stats[bundleKey + ".mjs"] %}

      {% set bundleHtml %}
        <a href="/docs/stats/{{ bundleKey }}.html" class="govuk-body-s govuk-link govuk-!-font-weight-regular"><code>{{ bundleKey }}.mjs</code></a>
      {% endset %}

      {% set bundleSizeHtml %}
        {% for bundle in bundleSize %}
          {{ bundle.size }} ({{ bundle.type }})<br>
        {% endfor %}
      {% endset %}

      {{ govukSummaryList({
        classes: "govuk-summary-list--no-border",
        rows: [
          {
            key: {
              text: "Entry file name"
            },
            value: {
              html: bundleHtml
            }
          },
          {
            key: {
              text: "Total file size"
            },
            value: {
              html: bundleSizeHtml
            }
          }
        ]
      }) }}

      {% for componentName in componentNamesWithJavaScript | sort %}
        {% set componentKey = "components/" + componentName + "/" + componentName %}
        {% set componentSize = stats[componentKey + ".mjs"] %}

        {% set componentSizeHtml %}
          {% for bundle in componentSize %}
            {{ bundle.size }} ({{ bundle.type }})<br>
          {% endfor %}
        {% endset %}

        {% set componentHtml %}
          <a href="/docs/stats/{{ componentKey }}.html" class="govuk-body-s govuk-link govuk-!-font-weight-regular"><code>{{ componentName }}.mjs</code></a>
        {% endset %}

        {{ govukSummaryList({
          card: {
            title: {
              text: componentName | unslugify,
              headingLevel: 3
            }
          },
          rows: [
            {
              key: {
                text: "File name"
              },
              value: {
                html: componentHtml
              }
            },
            {
              key: {
                text: "File size"
              },
              value: {
                html: componentSizeHtml
              }
            }
          ]
        }) }}
      {% endfor %}
    </div>
  </div>
  {% endif %}
{% endblock %}
